<template>
  <div>
    <!-- 查询部分 -->
    <div class="mg-0_5em">
      <el-form :inline="true" :model="fileQuery" ref="fileQueryRef" class="demo-form-inline">
        <el-form-item label="文件名称" prop="fileName">
          <el-input v-model="fileQuery.fileName" placeholder="文件名称" />
        </el-form-item>
        <el-form-item label="文件后缀" prop="fileSuffix">
          <el-input v-model="fileQuery.fileSuffix" placeholder="文件后缀：jpg、png、txt" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="initFileList">查询</el-button>
          <el-button type="success" :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- table部分 -->
    <div class="mg-0_5em">
      <div class="w-100 mb-0_5em flex-container flex-row-left">
        <el-button type="primary" :icon="UploadFilled" @click="openAddFileDialog()"> 上传文件 </el-button>
      </div>
      <el-table :data="fileList" border ref="tableRef" row-key="id">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="fileName" label="文件名称" align="center" />
        <el-table-column prop="fileSize" label="文件大小" align="center" >
          <template #default="{row}">
            {{ row.fileSize }} B
          </template>
        </el-table-column>
        <el-table-column prop="fileType" label="文件类型" align="center" />
        <el-table-column prop="fileSuffix" label="文件后缀" align="center" />
        <el-table-column label="操作" align="center" v-auth="'sys:file:api:delete'">
          <template #default="{ row }">
            <div class="ml-1em">
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="Delete"
                icon-color="red"
                title="确定删除?"
                @confirm="deleteFile(row.fileKey)">
                <template #reference>
                  <div>
                    <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                  </div>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页部分 -->
    <div class="mr-0_5em mt-1em flex-container flex-row-right">
      <pagination ref="paginationRef" @change="initFileList"></pagination>
    </div>
    <add-file ref="addFileRef" @success="initFileList" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search, Refresh, UploadFilled, Delete } from '@element-plus/icons-vue'
import File from '@/api/sys/file'
import Pagination from '@/components/Pagination/index.vue'
import AddFile from "./components/AddFile.vue";

// 生命周期, 初始化数据
onMounted(() => {
  initFileList()
})

// 查询条件
const fileQuery = ref({
  fileName: '',
  fileSuffix: '',
})

// 文件数据
const fileList = ref([])

// 分页组件
const paginationRef = ref()

/**
 * 初始化列表
 */
async function initFileList(pageInfo) {
  if (!pageInfo) {
    pageInfo = { current: 1, size: 10, total: 0 }
  }
  pageInfo.condition = fileQuery.value
  const { result } = await File.page(pageInfo)
  const { total, records } = result
  fileList.value = records
  paginationRef.value.changeTotal(total, pageInfo.size)
}

// 查询条件表单
const fileQueryRef = ref()

// 重置查询条件
function resetQuery() {
  let pageInfo = { current: 1, size: 10, total: 0 }
  fileQueryRef.value.resetFields()
  initFileList(pageInfo)
}

// 删除
function deleteFile(fileKey) {
  File.delete(fileKey).then(() => {
    initFileList()
  })
}

// 新增文件列表
const addFileRef = ref()

// 打开弹框
function openAddFileDialog() {
  addFileRef.value.switchDialog()
}
</script>

<style scoped></style>